<template>
  <div class="form-container">
    <el-form label-width="80px" ref="form" :model="form" :rules="rules">
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="code">
        <el-input v-model="form.code"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rules: {
        mobile: [{required: true, message:'必须要填入', triggle: 'blur'}],
        code: [
          {validator:(rule, value, callback)=>{
            console.log(rule, value, callback)
            if(value === '123456') {
              callback(new Error('这是世界上最差的密码了'))
            } else {
              callback()
            }
          }},
           {min: 6, max:8, message:'长度为6-8位', triggle: 'blur'},
          {required: true, message:'必须要填入', triggle: 'blur'},
        ]
      },
      form: {
        mobile: '',
        code: ''
      }
    }
  },

  methods: {
    onCancel () {
      this.$refs.form.resetFields() 
    },
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style scoped>
  .form-container{
    width: 600px;
  }
</style>